<template>
  <view class="wrap">
    <view class="top" @click="goMyInfo">
      <view class="left">
        <image :src="avatarUrl"></image>
        <view class="txt">
          <text class="avatar-txt">{{ nickName }}</text>
          <text class="phone-txt">{{ maskPhoneNumber(mobile) }}</text>
        </view>
      </view>
      <view class="right">
        <!-- 	<view class="iconfont icon-erweimaData">
					<canvas canvas-id="qrcode" style="width: 60rpx;height:60rpx;" />
				</view> -->
        <canvas
          class="qrcode"
          canvas-id="qrcode"
          style="width: 60rpx; height: 60rpx"
        />
        <view class="iconfont icon-youjiantou-white"></view>
      </view>
    </view>
    <view class="center"></view>
    <view class="list">
      <view class="ul">
        <view class="li" @click="goHref('healthCard')">
          <view class="left">
            <view class="iconfont icon-jiankangzheng"></view>
            <view class="txt">我的健康证<strong></strong></view>
          </view>
          <u-icon
            class="right"
            slot="right"
            name="arrow-right"
            color="#c0c4cc"
            size="16"
          ></u-icon>
        </view>
        <view class="li" @click="goHref('mySwimTicket')">
          <view class="left">
            <view class="iconfont icon-yongpiao"></view>
            <view class="txt">我的泳票<strong></strong></view>
          </view>
          <u-icon
            class="right"
            slot="right"
            name="arrow-right"
            color="#c0c4cc"
            size="16"
          ></u-icon>
        </view>
        <view class="li" @click="goHref('myOrder')">
          <view class="left">
            <view class="iconfont icon-yongpiao"></view>
            <view class="txt">我的订单<strong></strong></view>
          </view>
          <u-icon
            class="right"
            slot="right"
            name="arrow-right"
            color="#c0c4cc"
            size="16"
          ></u-icon>
        </view>
        <view class="li" @click="goHref('carryUserList')">
          <view class="left">
            <view class="iconfont icon-xiexingyonghu"></view>
            <view class="txt">携行用户<strong></strong></view>
          </view>
          <u-icon
            class="right"
            slot="right"
            name="arrow-right"
            color="#c0c4cc"
            size="16"
          ></u-icon>
        </view>
        <view class="li" @click="goHref('entryRecord')">
          <view class="left">
            <view class="iconfont icon-ruchangjilu"></view>
            <view class="txt">入场记录<strong></strong></view>
          </view>
          <u-icon
            class="right"
            slot="right"
            name="arrow-right"
            color="#c0c4cc"
            size="16"
          ></u-icon>
        </view>
        <view class="li" @click="goHref('myInfo')">
          <view class="left">
            <view class="iconfont icon-ruchangjilu"></view>
            <view class="txt">账户设置<strong></strong></view>
          </view>
          <u-icon
            class="right"
            slot="right"
            name="arrow-right"
            color="#c0c4cc"
            size="16"
          ></u-icon>
        </view>
        <view
          class="li"
          v-if="
            mobile == '186****4039' ||
            '18612184039' ||
            '138****2077' ||
            '13811522077'
          "
          @click="goHref('cancel')"
        >
          <view class="left">
            <view class="iconfont icon-ruchangjilu"></view>
            <view class="txt">注销<strong></strong></view>
          </view>
          <u-icon
            class="right"
            slot="right"
            name="arrow-right"
            color="#c0c4cc"
            size="16"
          ></u-icon>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import uQRCode from '@/common/uqrcode.js'
import { request, requestData } from '@/utils/http.js'
export default {
  data() {
    return {
      avatarUrl: '',
      nickName: '',
      mobile: '',
      user_id: uni.getStorageSync('user_id'),
    }
  },
  onLoad() {},
  onReady() {},
  onShow() {
    this.nickName = uni.getStorageSync('nickName')
    this.mobile = uni.getStorageSync('mobile')
    this.avatarUrl =
      uni.getStorageSync('avatarUrl') ||
      require('@/static/img/default-avatar.png')
    // if (_mobile == '') {
    //   this.nickName = '您还没有登录'
    //   this.mobile = '登录享受更多精彩服务~'
    // } else if (_mobile != '' && _nickName == '') {
    //   this.nickName = '昵称'
    //   this.mobile = uni.getStorageSync('mobile')
    // } else if (_mobile != '' && _nickName != '') {
    //   this.nickName = uni.getStorageSync('nickName')
    //   this.mobile = uni.getStorageSync('mobile')
    // }

    if (this.mobile == '') {
      this.nickName = '您还没有登录'
      this.mobile = '登录享受更多精彩服务~'
    } else {
      this.nickName = uni.getStorageSync('nickName') || '昵称'
      this.mobile = uni.getStorageSync('mobile')
    }

    this.getQrcode()
    //this.initUesrInfo() //初始info
  },
  onHide() {},
  onUnload() {},
  methods: {
    //手机号替换中间4位为星号
    maskPhoneNumber(phoneNumber) {
      if (phoneNumber.length === 11) {
        return phoneNumber.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
      } else {
        return '手机号'
      }
    },
    //初始info
    initUesrInfo() {
      request('/user/info/get', {})
        .then((res) => {
          this.avatarUrl =
            res?.datas?.avatar_url || require('@/static/img/default-avatar.png')
          this.nickName = res?.datas?.nick_name || '您还没有登录'
          this.mobile = res?.datas?.mobile || '登录享受更多精彩服务~'
        })
        .catch((err) => {
          console.log(err)
        })
    },
    goMyInfo() {
      let user_id = uni.getStorageSync('user_id')
      if (!user_id) {
        uni.showToast({
          title: '请先绑定手机号',
          icon: 'none',
        })
        setTimeout(() => {
          uni.navigateTo({
            url: '/pages/loginPhone/loginPhone',
          })
        }, 2000)
      } else {
        uni.navigateTo({
          url: '/pagesC/myInfo/myInfo',
        })
      }
    },
    goHref(txt) {
      let user_id = uni.getStorageSync('user_id')
      if (!user_id) {
        uni.showToast({
          title: '请先绑定手机号',
          icon: 'none',
        })
        setTimeout(() => {
          uni.navigateTo({
            url: '/pages/loginPhone/loginPhone',
          })
        }, 2000)
      } else {
        if (txt == 'healthCard') {
          uni.navigateTo({
            url: '/pagesC/healthCard/healthCard',
          })
        } else if (txt == 'mySwimTicket') {
          uni.navigateTo({
            url: '/pagesC/mySwimTicket/mySwimTicket',
          })
        } else if (txt == 'myOrder') {
          uni.navigateTo({
            url: '/pagesC/myOrder/myOrder',
          })
        } else if (txt == 'carryUserList') {
          uni.navigateTo({
            url: '/pagesC/carryUserList/carryUserList',
          })
        } else if (txt == 'entryRecord') {
          uni.navigateTo({
            url: '/pagesC/entryRecord/entryRecord',
          })
        } else if (txt == 'myInfo') {
          uni.navigateTo({
            url: '/pagesC/myInfo/myInfo',
          })
        } else if (txt == 'cancel') {
          request('/user/cancel')
            .then((res) => {
              if (res.code == 0) {
                console.log(res)
                uni.$u.toast('注销成功')
                uni.clearStorageSync()
                uni.redirectTo({
                  url: '/pagesC/myInfo/myInfo',
                })
              } else {
                uni.$u.toast('注销失败')
              }
            })
            .catch((err) => {
              console.log(err)
            })
        }
      }
    },

    //允许转发的默认函数
    onShareAppMessage() {},

    // 生成二维码
    getQrcode() {
      uQRCode.make({
        canvasId: 'qrcode',
        componentInstance: this,
        text: 'biz=user&user_id=' + uni.getStorageSync('user_id'),
        size: 30,
        margin: 0,
        backgroundColor: '#000',
        foregroundColor: '#fff',
        fileType: 'jpg',
        errorCorrectLevel: uQRCode.errorCorrectLevel.H,
        success: (res) => {},
      })
    },
  },
}
</script>

<style lang="scss">
@import url('/static/font-alibb/iconfont.css');

.wrap {
  width: 100%;
  position: relative;
  min-height: 100vh;
  overflow-x: hidden;
  overflow-y: scroll;
  background: #f7f7f8;
}

.top {
  width: 100%;
  height: 240rpx;
  background: linear-gradient(to bottom, #d5ad57, #cfb58a);
  padding: 0 20rpx;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .left {
    display: flex;
    justify-content: flex-start;
    align-items: center;

    image {
      width: 120rpx;
      height: 120rpx;
      border-radius: 50%;
    }

    .txt {
      margin-left: 20rpx;
      display: flex;
      flex-flow: column;
      justify-content: flex-start;
      align-items: flex-start;
    }

    .avatar-txt {
      color: #fff;
    }

    .phone-txt {
      margin-top: 30rpx;
      font-size: 28rpx;
      color: #fff;
    }
  }

  .right {
    color: #fff;
    display: flex;
    justify-content: flex-end;
    align-items: center;

    .qrcode {
      margin-right: 30rpx;
    }
  }
}

.center {
  box-sizing: border-box;
  width: 100%;
  height: 120rpx;
  margin: 0 auto;
  background: #252525;
  // margin-top: -180rpx;
  border-radius: 0 0 10% 10%;
  color: #fff;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-left: 30rpx;
}

.list {
  width: 96%;
  border-radius: 15rpx;
  background: rgba(255, 255, 255, 1);
  height: auto;
  margin: 0 auto;

  .ul {
    margin: 0;
    padding: 0;
    margin-top: 10rpx;
    display: flex;
    flex-flow: column;
    justify-content: flex-start;

    .li {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 100rpx;
      line-height: 100rpx;
      border-bottom: 1px solid #f5f5f0;
      padding: 0 20rpx;

      .left {
        display: flex;
        justify-content: flex-start;
        align-items: center;

        .txt {
          margin-left: 15rpx;
          color: $global-fontcolor-black;
          font-weight: 400;
        }
      }
    }
  }
}
</style>
